<template>
  <div class="home">
    <div class="body">
      <div class="title">点料</div>
      <div class="cont">
        <div class="line">
          <div class="row">
            <div class="tit">物料种类：</div>
            <el-select v-model="type" placeholder="请选择" @change="changeType()">
              <el-option
                v-for="item in typeList"
                :key="item.FlnkID"
                :label="item.MaterielTypeName"
                :value="item.MaterielTypeCode"
              ></el-option>
            </el-select>
          </div>
          <div class="row">
            <div class="tit">物料：</div>
            <el-select
                v-model="materiel"
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="materielFilter"
                :loading="loading"
                style="width:5rem"
                @change="changeMateriel"
            >
                <el-option
                v-for="item in materielFilterList"
                :key="item.FlnkID"
                :label="item.MaterielsDetailCode + '/' + item.MaterielName + '/' + item.ColorConfigName + '/' + item.SpecConfigName"
                :value="item.FlnkID"
                ></el-option>
            </el-select>
          </div>
          <div class="row">
              <div class="tit">
                  <el-button type="primary" style="width:200px;height:38px;" @click="goValidity()">校称</el-button>
              </div>
          </div>
        </div>
        <div class="line">
          <div class="row">
            <div class="tit">物料名称：</div>
            <div class="des">{{materielInfo && materielInfo.MaterielName ? materielInfo.MaterielName : '--'}}</div>
          </div>
          <div class="row">
            <div class="tit">型号：</div>
            <div class="des">{{materielInfo && materielInfo.ColorConfigName ? materielInfo.ColorConfigName : '--'}}</div>
          </div>
          <div class="row">
            <div class="tit">规格：</div>
            <div class="des">{{materielInfo && materielInfo.SpecConfigName ? materielInfo.SpecConfigName : '--'}}</div>
          </div>
        </div>
        <div class="main">
            <div class="tit">重量</div>
            <div class="des">
              <el-input
                v-model="weight"
                ref="weightInput"
                placeholder="请输入重量"
                style="width:200px"
              ></el-input>
              <div class="unit">g</div>
            </div>
            <div class="but">
                <el-button type="primary" style="width:300px;height:54px;font-size:28px">{{number.toFixed(4)}}{{materielInfo.StockUnitName ? '(' + materielInfo.StockUnitName + ')' : '' }}</el-button>
            </div>
        </div>
      </div>
    </div>
    
    <!-- 校称 -->
    <div class="menuModalBox-w" v-if="swipeCardShow">
      <div class="menuModalBox">
        <div class="close">
          <div class="el-icon-circle-close icon" @click="handleClose()" />
        </div>
        <Validity :p1="type" :p2="materiel"></Validity>
      </div>
    </div>
  </div>
</template>

<script>
import {GetMaterielTypeList} from '@/api/search'
import {GetMaterielWeighing, GetMaterielsDetailByFilter} from '@/api/tool'
import Validity from '@/view/tool/validity'
export default {
  name: 'demo',
  data () {
    return {
      materiel: '',
      materielList: [],
      pieceCount: '',
      weigth: '',
      typeList: [],
      type: '',
      loading: false,
      materielFilterList: [],
      keyWord: '',
      materielInfo: {},
      weight: '',
      swipeCardShow: false
    }
  },
  components: {
    Validity
  },
  computed: {
    number () {
      return this.weight / this.materielInfo.UnitWeight ? this.weight / this.materielInfo.UnitWeight : 0
    }
  },
  methods: {
    getTypeList () {
      let vm = this
      GetMaterielTypeList().then((response) => {
        if (response.data.data) {
          vm.typeList = response.data.data
        }
      })
    },
    materielFilter (query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.materielFilterList = this.materielList.filter((item) => {
            return (
              item.MaterielsDetailCode.indexOf(query) > -1 || item.MaterielName.indexOf(query) > -1 || item.ColorConfigName.indexOf(query) > -1 || item.SpecConfigName.indexOf(query) > -1
            )
          })
        }, 200)
      } else {
        this.materielFilterList = this.materielList
      }
    },
    changeType () {
      let vm = this
      let params = new FormData()
      params.append('Type', vm.type)
      params.append('SearchValue', vm.keyWord)
      GetMaterielsDetailByFilter(params).then((response) => {
        if (response.data.data) {
          vm.materielList = response.data.data
          vm.materielFilterList = response.data.data
        }
      })
    },
    changeMateriel () {
      this.getInfo()
    },
    getInfo () {
      let vm = this
      let params = {
        MSDetailFlnkID: vm.materiel,
        OperFlnkID: vm.getLocalStorage('UserFlnkID')
      }
      GetMaterielWeighing(params).then((response) => {
        if (response.data.result) {
          vm.materielInfo = response.data.data
          if (!vm.materielInfo.UnitWeight) {
            vm.$message('暂无克重，请先校称')
          }
        } else {
          vm.$message('暂无数据')
          vm.materielInfo = {}
        }
      })
    },
    goValidity () {
      this.swipeCardShow = true
    //   this.$router.replace({path: '/tool/calc', query: {type: this.type, materiel: this.materiel}})// 不保存的方式记录一下路由
    //   this.$router.push({path: '/tool/validity', query: {type: this.type, materiel: this.materiel}})
    },
    handleClose () {
      this.swipeCardShow = false
      if (this.type && this.materiel) {
        this.getInfo()
      }
    }
  },
  watch: {},
  mounted () {
    this.getTypeList()
    if (this.$route.query.type && this.$route.query.materiel) {
      this.type = this.$route.query.type
      this.changeType()
      this.materiel = this.$route.query.materiel
      this.getInfo()
    }
  },
  beforeDestroy: function () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "~@/css/tool/calc.scss";
</style>
